import React, { memo,useEffect,useState,useRef,useCallback} from 'react'
import { useSelector, useDispatch,shallowEqual } from 'react-redux'

import {Carousel} from 'antd'
import { getTopBannerAction } from '../../store/actionCreators'
import {
  BannerWrapper,
  BannerLeft,
  BannerRight,
  BannerControl
} from './style';

export default memo(function ZHTopBanner() {
  // state
  const [currentIndex, setCurrentIndex] = useState(0)
  // 和redux hooks相连
  const {topBanners}  = useSelector(state => ({
    topBanners:state.getIn(["recommend","topBanners"])
  }), shallowEqual) 

  const dispatch = useDispatch()
  // 其他hooks
  const bannerRef = useRef()

  useEffect(() => {
    dispatch(getTopBannerAction())
  },[dispatch])

  const bannerChange = useCallback((from, to) => {
    setTimeout(() => {
      setCurrentIndex(to)
    },0)
  },[])

  // 其他业务逻辑，背景图片
  // const bgImage = topBanners[currentIndex] && (topBanners[currentIndex].imageUrl + "?imageView&blur=40×20")
  const bgImage = topBanners[currentIndex] && (topBanners[currentIndex].imageUrl + "?imageView&blur=40x20")
  return (
    <BannerWrapper bgImage={bgImage}>
      <div className="banner wrap-v2">
        <BannerLeft>
          <Carousel effect="fade" autoplay ref={bannerRef} beforeChange={bannerChange}>
            {
              topBanners.map((item,index) => {
                return(
                  <div className="banner-item" key={item.imageUrl}>
                    <img className="image" src={item.imageUrl} alt={item.typeTitle} />
                  </div>
                )
              })
            }
          </Carousel>
        </BannerLeft>
        <BannerRight></BannerRight>
        <BannerControl>
          <button className="btn left" onClick={e => bannerRef.current.prev()}></button>
          <button className="btn right" onClick={e => bannerRef.current.next()}></button>
        </BannerControl>
      </div>
    </BannerWrapper>
  )
})

